<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 节流：间隔时间内只触发一次
        
        // 防抖：在间隔时间内多次触发事件，以最后一次为准
        // let timer = null;
        // window.onresize = function(){
        //     timer && clearTimeout(timer);
        //     timer = setTimeout(function(){
        //         console.log("尺寸变化")
        //     },2000)
        // }


        // let timer = null;
        // window.onresize = function(){
        //     timer && clearTimeout(timer);
        //     timer = setTimeout(function(){
        //         console.log("尺寸变化")
        //     },2000)
        // }
        

        // 我停下来的两秒后执行
        // function fd(fn,time){
        //     let timer = null;
        //     return function(){
        //         timer&& clearTimeout(timer);
        //         let that = this;
        //         let args = arguments;
        //         timer = setTimeout(function(){
        //             fn.apply(that,args)
        //         },time)
        //     }
        // }

        // window.addEventListener("resize",fd(function(){
        //     console.log("尺寸变化")
        // },2000))


        // 防抖
        // function fd(fn,time){
        //     let timer = null;
        //     return function(){
        //         timer&&clearTimeout(timer);
        //         let that = this
        //         let arg = arguments
        //         timer = setTimeout(function(){
        //             fn.apply(that,arg);
        //         },time)
        //     }

        // }

        // window.addEventListener("resize",fd(function(){
        //     console.log("变化")
        // },2000))




        // 节流
        // 每两秒执行一次
        // let timer = null;
        // let flag = true
        // window.onresize = function(){
        //     if(!flag) return
        //     flag = false
        //     timer && clearTimeout(timer);
        //     timer = setTimeout(function(){
        //         flag = true
        //         console.log("尺寸变化")
        //     },2000)
        // }


        // let timer = null;
        // let flag = true;
        // window.onresize = function(){
        //     if(!flag) return
        //     flag = false;
        //     timer&&clearTimeout(timer)
        //     timer = setTimeout(function(){
        //         flag = true
        //         console.log("尺寸变化")
        //     },2000)
        // }

        function jl(fn,time){
            let timer = null;
            return function(){
                if(timer) return
                let that = this
                let arg = arguments;
                timer = setTimeout(function(){
                    fn.apply(that,arg);
                    timer = null
                },time)
            }
        }

        window.addEventListener("resize",jl(function(){
            console.log("节流")
        },2000))
    </script>
</body>
</html>